import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { playlistDetailApi, playlistCommentApi, playlistSubscribersApi } from '@/api/playlist';
import { getSongDetailApi } from "@/api/music";
import PlaylistHeader from './components/PlaylistHeader';
import PlaylistTable from './components/PlaylistTable';

export default function Playlist() {
  const [playlistData, setPlaylistData] = useState(null)
  const [songs, setSongs] = useState(null)
  const location = useLocation()
  const params = new URLSearchParams(location.search)
  const id = params.get('id')
  useEffect(() => {
    // 获取歌单详情
    const getPlaylistDetail = async () => {
      const { playlist } = await playlistDetailApi({ id })
      setPlaylistData(playlist)
      const ids = playlist.trackIds.map(i => i.id)
      const { songs: allSong } = await getSongDetailApi(ids)
      setSongs(allSong)
      console.log('歌单信息', playlist);
      console.log('歌单的所有歌曲', allSong);
    }
    getPlaylistDetail()
  }, [id])

  return (
    <>
      <PlaylistHeader playlistData={playlistData} />
      <PlaylistTable songs={songs} />
    </>
  )
}
